import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    redirect: '/wechat',
  },
  {
    path: '/wechat',
    name: 'wechat',
    component: () => import('@/views/wechat/Index.vue'),
    meta: {
      Title: '微信',
      keepAlive: false,
      TabBar: true,
      NavBar: true,
    }
  },
  {
    path: '/wechat/search',
    name: 'search',
    component: () => import('@/views/wechat/Search.vue'),
    meta: {
      Title: '搜索',
      keepAlive: true,
      NavBar: true,
    }
  },
  {
    path: '/wechat/chat/:title',
    name: 'chat',
    component: () => import('@/views/wechat/Chat.vue'),
    meta: {
      Title: '对话',
      NavBar: true,
      NavBarArrow: true,
    }
  },
  {
    path: '/contact',
    name: 'contact',
    component: () => import('@/views/contact/Index.vue'),
    meta: {
      Title: '通讯录',
      keepAlive: false,
      TabBar: true,
      NavBar: true,
    }
  },
  {
    path: '/contact/detail/:id',
    name: 'contactDetail',
    component: () => import('@/views/contact/Detail.vue'),
    meta: {
      Title: '',
      keepAlive: true,
      NavBar: true,
      NavBarArrow: true,
    }
  },
  {
    path: '/discover',
    name: 'discover',
    component: () => import('@/views/discover/Index.vue'),
    meta: {
      Title: '发现',
      NavBar: true,
      TabBar: true,
    }
  },
  {
    path: '/setting',
    name: 'setting',
    component: () => import('@/views/setting/Index.vue'),
    meta: {
      Title: '我',
      TabBar: true,
      NavBar: true,
    }
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

router.beforeEach((to, from, next) => {
  const routes = router.options.routes
  const toIndex = routes.findIndex(route => route.name === to.name)
  const fromIndex = routes.findIndex(route => route.name === from.name)
  let transition = 'slide-forward' // 默认前进动画

  if (toIndex < fromIndex) {
    transition = 'slide-backward' // 后退动画
  } else {
    transition = 'slide-forward' // 前进动画
  }

  if (to.name === 'search' || from.name ==='search') {
    to.meta.transition = 'fade'
  } else {
    to.meta.transition = transition // 给目标路由添加动画类型
  }

  next()
})

export default router
